<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="../js/vue2.js"></script>
</head>
<body>
<!--
  要求:
     1.  用户在表单中填写备忘录，单击添加按钮 备忘录展示在列表中
         1.1用户不能添加空的备忘录   作出提示
         1.2 添加完毕后 清空表单
     2.  当备忘录列表中没有数据时展示    <span>备忘录列表为空,请添加</span>  有数据隐藏
     3.  单击删除按钮时   删除对应的备忘录
     4.  单击清空备忘录时  要清空所有备忘录数据
     5.  添加， 删除，清空按钮被点击时     备忘录的总条数要随之改变
-->

<div id="app">
  <input type="text" placeholder="请输入备忘录" v-model="memo">  <button @click="addMessage">添加备忘录</button>
  <h3>备忘录列表</h3>
  <span v-if="memos.length==0">备忘录列表为空,请添加</span>
  <ul>
    <li v-for="(message,index) in memos" :key="index">{{message}}<button @click="removeMemo(index)">删除</button></li>
  </ul>
  <button @click="clear">清空备忘录</button>
  <span>备忘录共有{{memos.length}}条</span>
</div>

<script>
  let vm = new Vue({
      el:'#app',
      data:{
        memos:[
                '备忘录1','备忘录2'
        ],
        memo:""
      },
      methods:{
        addMessage(){
          if (this.memo.trim().length==0){
            alert("请填写备忘录")
            this.memo = ""
            return
          }
          this.memos.push(this.memo)
          this.memo = ""
        },
        removeMemo(index){
           //  如何实现根据索引删除指定位置的元素
          this.memos.splice(index,1)
        },
        clear(){
             this.memos = []
        }
      }
    })
</script>
</body>
</html>